<!DOCTYPE html>
<html lang="en">
<head>
        
    <meta charset="UTF-8">
        <title>代码生成工具</title>
        
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 引入样式 -->
        
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        <!-- 引入组件库 -->
        
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
        
       
        
    <el-table
                        :data="tableData"
                        stripe
                        border
                        style="width: 100%">
                
        <el-table-column
                                prop="tableName"
                                label="表名称"
                                width="180">
                    
        </el-table-column>
                
        <el-table-column
                                label="实体类名称"
                                width="180">
                        
            <template slot-scope="scope">
                                
                <el-input v-model="scope.row.modelName"></el-input>
                            
            </template>
                    
        </el-table-column>
                
        <el-table-column
                                label="Mapper名称">
                        
            <template slot-scope="scope">
                                
                <el-input v-model="scope.row.mapperName"></el-input>
                            
            </template>
                    
        </el-table-column>
                
        <el-table-column
                                label="Service名称">
                        
            <template slot-scope="scope">
                                
                <el-input v-model="scope.row.serviceName"></el-input>
                            
            </template>
                    
        </el-table-column>
                
        <el-table-column
                                label="Controller名称">
                        
            <template slot-scope="scope">
                                
                <el-input v-model="scope.row.controllerName"></el-input>
                            
            </template>
                    
        </el-table-column>
            
    </el-table>
        
    <div>
                
        <el-button @click="generateCode" type="success">生成代码</el-button>
                
        <div style="color: #ff0114;font-weight: bold">*{{result}}*</div>
                
        <div>{{codePath}}</div>
            
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data: function () {
            return {
                tableData: []
            }
        },
        methods: {
            generateCode() {
                let _this = this;
                axios.post('/generateCode', this.tableData)
                    .then(function (response) {
                        _this.result = response.data.msg;
                        _this.codePath = response.data.obj;
                    })
                    .catch(function (error) {
                    });
            }
        }
    })
</script>
</body>
</html>